<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>16_盒子模型-幽灵空白</title>
        <style>
            #wrapper {
                width: 600px;
                border: 5px solid black;
                /* 方案二： 给父元素设置 font-size: 0。
                如果该行内元素或行内块元素内部还有文本内容需单独设置font-size。 */
                /* font-size: 0; */
            }

            /* 方案一： 给行内元素或行内块元素设置vertical 的值不为 baseline 即可，
            设置为 middel、bottom、top 都可以。 */

            #wrapper img {
                /* vertical-align: bottom;
                vertical-align: top;
                vertical-align: middle; */

                /* 方案三： 主要针对图片，设置图片为 display:block。 */
                display: block;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <img src="./img/01.jpg" alt="">xg
        </div>
    </body>
</html>